<template>

	<view :style="{'background-color': '#fff','position':'fixed', 'width':'100%', 'bottom': '0px','z-index':'998'}">
		<view class="tab-bar-line"></view>
		<view
			:style="{'display': 'flex','flex-direction': 'row','justify-content': 'space-around', 'align-items': 'center','height':height+'px' }">
			<view v-for="(item,index) in tabList" :index="index" :key="index" @click="tabClick(index,item.pagePath)">
				<view v-if="item.iconfont!=undefined" class="gridView">
					<uni-icons
						:customPrefix="item.customPrefix!=undefined&&item.customPrefix!=''?item.customPrefix:'my-iconfont'"
						:type="item.iconfont.icon"
						:size="(item.iconfont.size!=undefined &&item.iconfont.size!=''?item.iconfont.size:35)"
						:color="isSelect==index?item.iconfont.selectedColor:item.iconfont.color" />
					<text
						style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: 500;"
						:style="{'font-size':item.fontSize+'px','color':isSelect==index?selectedColor:color}">{{item.text}}</text>
				</view>
				<view class="gridView" v-else>
					<image :src="isSelect==index?item.selectIconPath:item.iconPath"
						:style="{'width':iconWidth+'px','height':iconWidth+'px'}"></image>
					<text :style="{ 'font-size':item.fontSize+'px','color':isSelect==index?selectedColor:color}"
						style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-weight: 500;">{{item.text}}</text>
				</view>
			</view>
		</view>
	</view>
	<!-- 新增一个空的占位控件，防止也页面滑动时内容被底部导航栏遮挡 -->
	<view :style="{'height': height+'px' }"></view>
</template>

<script>
	/**
	 * {
		pagePath: "/pages/main/mainPage",
		//iconPath: "static/c3.png",
		// selectedIconPath: "static/c4.png",
		iconfont: {
		icon: "icon-rukudan",
	    selectedColor: "#ba251e",
	    color: "#939393",
	    size: "24px"
		},
		text: "工作台"
		fontSize:"20"
		}
	 */
	import * as configJs from '../../common/config.js'

	export default {
		props: {
			/**
			 * 导航栏显示信息列表
			 */
			tabList: {
				type: Array,
				default () {
					return []
				}
			},
			///文字默认时的颜色
			color: {
				type: [String, Number],
				default: '#000000'
			},
			///文字选中时的颜色
			selectedColor: {
				type: [String, Number],
				default: '#ba251e'
			},
			//导航栏高度
			height: {
				type: [String, Number],
				default: '50'
			},
			///图片图标的宽度和高度
			iconWidth: {
				type: [String, Number],
				default: 30
			},
			//默认选中的导航元素
			selectIndex: {
				type: [String, Number],
				default: 0
			}, //默认选择第一个
			//当前选择的索引值
			current: {
				type: [String, Number],
				default: 0
			}

		},
		data() {
			return {
				isSelect: '',
				currentPath: ''
			}
		},
		mounted() {
			this.changeSelect()
		},
		methods: {
			tabClick(selectIndex, url) {
				var isNew = true; //默认是跳转到新的界面
				if (this.isSelect == selectIndex) {
					isNew = false;
				}
				// var defultIndex = getApp().globalData.tabBar.selectIndex
				// getApp().globalData.tabBar.selectIndex = selectIndex;
				if (isNew) {
					uni.reLaunch({
						url: url,
						animationType: 'none',
						success: (res) => {

						},
						fail: (res) => {
							// getApp().globalData.tabBar.selectIndex = defultIndex;
						}
					})
				}
			},
			changeSelect() {
				///获取当前打开的所有界面数组
				var pages = getCurrentPages();
				//获取当前打开的页面的路由地址
				this.currentPath = pages[pages.length - 1].route;
				console.log(this.currentPath)
				if (this.tabList != undefined && this.tabList.length > 0) {
					this.tabList.forEach((value, index, array) => {
						if (value.pagePath != undefined) {
							if (value.pagePath.indexOf(this.currentPath) != -1) {
								this.isSelect = index
							}
						} else {
							this.isSelect = 0
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.gridView {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
